<template>
  <div class="recharge">
      <div class="mb30">
        <el-row>
          <el-col :span="8">
            <el-input
              v-model="entryTxt"
              placeholder="请输入设备编号查询"
              :change="txtnull()">
            </el-input>
          </el-col>
          <el-col :span="2">
            <div class="pl15">
              <el-button
                @click="searchList()"
                type="info">
                查询
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="device_sn"
            label="设备编号">
          </el-table-column>
          <el-table-column
            prop="name"
            label="设备名称">
          </el-table-column>
          <el-table-column
            prop="user_id"
            label="用户ID">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="用户昵称">
          </el-table-column>
          <el-table-column
            label="结果反馈">
            <template scope="props">
              <span v-if="props.row.operate_result==-1">无结果</span>
              <span v-if="props.row.operate_result==1">抓取成功</span>
              <span v-if="props.row.operate_result==2">抓取失败</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="updated_at"
            label="游戏时间">
          </el-table-column>
        </el-table>
        <page-ctrl
          v-if="pageData"
          :page_data="pageData"
          v-on:sentLengthfn="sentLengthfn"
          v-on:firstfn="firstData"
          v-on:nextfn="nextData"
          v-on:prefn="preData"
          v-on:lastfn="lastData">
        </page-ctrl>
      </div>
    <div v-if="loading" class="loadingbox"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../assets/js/api'
  import pageCtrl from '../common/pageCtrl'

  export default {
    name: "recharge",
    data() {
      return {
        pageData:null,
        searchTxt: '',
        entryTxt: '',
        page: 1,
        per_page: 5,
        loading: false,
        tableData: null,
        is_moreData: false, //是否有更多
        is_preData: false,//是否有上一页
        tableDataLength: null, //总长度
        pages: null, //总页数
        is_change: false
      }
    },
    mounted: function () {
      this.getlist(); //充值列表；
    },
    components: {
      pageCtrl
    },
    methods: {
      getlist: function () {
        this.loading = true;
        api.fetch("/api/admin/game-records?page="
          + this.page
          + '&per_page='
          + this.per_page
          + "&device_sn="
          + this.searchTxt
          + "&operate_result=" + -1)
          .then(res => {
            this.pageData=res.meta;
            this.pageData.page=this.page;
            this.tableData = res.data;
            this.pageData.tableDataLength = res.meta.pagination.total; //总长度
            this.pageData.pages = Math.ceil(this.pageData.tableDataLength / this.per_page); //总页数
            let getLengthData = res.meta.pagination.count;
            this.tableList = res.data;
            if (this.page <= 1) {
              this.pageData.is_preData = false;
            } else {
              this.pageData.is_preData = true;
            }
            if (getLengthData < this.per_page) {
              this.pageData.is_moreData = false;
            } else {
              this.pageData.is_moreData = true;
            }
            if (this.pages == this.page) {
              this.pageData.is_moreData = false;
              this.loading = false;
            }
            this.loading = false;
          }).catch();
      },
      firstData: function () {
        this.page = 1;
        this.getlist();
      },//首页
      nextData: function () {
        this.page++;
        this.getlist();
      },//下一页
      preData: function () {
        this.page--;
        this.getlist();
      },//上一页
      lastData: function () {
        let pagelength = this.pageData.pages;
        this.page = pagelength;
        this.getlist();
      },//尾页
      sentLengthfn: function (lengthData) {
        this.page = 1;
        this.per_page = lengthData;
        this.getlist();
      },
      searchList: function () {
        if (this.entryTxt == '') {
          return
        } else {
          this.page=1;
          this.searchTxt = this.entryTxt;
          this.getlist();
          this.is_change = true;
        }
      }, //搜索
      txtnull: function () {
        if (this.is_change == true) {
          if (this.entryTxt == '') {
            this.searchTxt = '';
            this.page = 1;
            this.getlist();
            this.is_change = false;
          }
        }
      } //输入框空
    }
  }
</script>

<style scoped>
  .user {
    height: 100%;
    min-width: 1200px;
  }
</style>

